<template>
	<view class="page">
		<view class="fixBox">
			<view class="choose-nickname-row">
				<view class="tit">
					企业名称
				</view>
				<input v-model="name" type="text" placeholder="请输入企业名称" />
			</view>

			<view class="choose-nickname-row">
				<view class="tit">
					<view>入市时间</view>
					<view class="right">
						<view class="re" @tap.stop="toSearch">
							查询
						</view>
						<view class="cle" @tap.stop="toClear">
							重置
						</view>
					</view>
				</view>
				<view class="right" @click="show = true">
					<view class="" :style="{color:value?'#000':'#979797'}">
						{{value||'请选择入市时间'}}
					</view>
					<u-icon class="icon" name="arrow-down" color="#BABABA" size="12"></u-icon>
				</view>
				<!-- <input v-model="form.mobile" type="number" placeholder="请选择入市时间" /> -->
			</view>
		</view>
		<view class="table" style="width:100%">
			<table width="100%" height="16em" cellpadding="4.8" align="center">
				<tr>
					<th class="one">序号</th>
					<th>企业名称</th>
					<th class="k">电压等级</th>
					<th class="t">入市时间</th>
				</tr>
				<tr v-for="(i,index) in tableList" @tap.stop="toCompany(i.id)">
					<td class="one">{{index+1}}</td>
					<td>{{i.name}}</td>
					<td class="k">{{i.voltage}}</td>
					<td class="t">{{i.entry_time.split(' ')[0]}}</td>
				</tr>
			</table>
		</view>
		<u-datetime-picker :show="show" mode="year-month" @confirm="chooseYear" v-model="today"
			@cancel="show = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		customList
	} from "@/request/homeApi.js";
	export default {
		data() {
			return {
				today: Number(new Date()),
				show: false,
				value: '',
				placeholderStyle: {
					fontSize: "28rpx",
					color: "#D9D9D9",
				},
				tableList: [],
				page: 1,
				last_page: 1,
				name: '',
			};
		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				that.page = that.page + 1
				that.getList()
			}
		},
		onLoad() {

		},
		onShow() {
			this.tableList = []
			this.getList()
		},
		methods: {
			// 客户详情
			toCompany(id) {
				uni.navigateTo({
					url: `/pages/home/company?id=${id}`
				})
			},
			toSearch() {
				this.tableList = []
				this.page = 1
				this.getList()
			},
			toClear() {
				this.value = ''
				this.name = ''
				this.page = 1
				this.tableList = []
				this.getList()
			},
			// 客户列表
			getList() {
				let that = this
				customList({
					page: that.page,
					name: that.name,
					address: '',
					entry_time: that.value,
					limit: 20,
					cunstom_industry_id: '',
					status:'',
					lng:'',
					lat:''
				}).then(res => {
					that.tableList = that.tableList.concat(res.data.list)
					that.last_page = Math.ceil(res.data.count / res.data.list.length)
				})
			},
			chooseYear(e) {
				this.value = this.$TimeFormat(e.value, 'yyyy-mm')
				this.show = false
			},
		},
	};
</script>

<style lang="scss" scoped>
	table {
		font-size: 26rpx;
	}

	table .one {
		width: 13% !important;
	}

	table .t {
		width: 30% !important;
	}

	table .k {
		width: 22% !important;
	}

	.right {
		width: 98%;
		height: 54rpx;
		line-height: 54rpx;
		padding: 0 10rpx 0 0;
		display: flex;
		font-size: 26rpx;
		justify-content: space-between;
	}

	table tr {
		text-align: center;
		display: flex;
		color: #000;
		// align-items: center;	
	}

	//文本居中
	table th {
		padding: 14rpx;
		text-align: center;
		// align-items: center;
		width: 39%;
		border: 1rpx solid darkgrey;
	}

	table td {
		text-align: center;
		// align-items: center;
		width: 39%;
		padding: 14rpx;
		border: 1rpx solid darkgrey;
	}

	.page {
		padding: 20rpx 38rpx;

		.fixBox {
			position: sticky;
			top: 0;
			background-color: #fff;
		}

		.choose-nickname-row {
			width: 100%;
			height: 5%;
			text-align: left;
			padding: 16px 2px 4px;
			font-size: 28rpx;
			margin: 10rpx auto;
			border-bottom: 3rpx solid #F2F2F2;

			.tit {
				height: 50rpx;
				line-height: 50rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				justify-content: space-between;
				color: #000;
				margin-bottom: 20rpx;

				.right {
					width: 40%;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					justify-content: space-between;

					.re {
						background: #58B99D;
						color: #fff;
						padding: 0rpx 36rpx;
						border-radius: 10rpx;
					}

					.cle {
						background: #D9D9D999;
						color: #979797;
						padding: 0 36rpx;
						border-radius: 10rpx;
					}

				}
			}

			/deep/.input {
				color: #000;
			}

			.codeinput {
				color: #466EC5;
				width: 180rpx;
			}
		}

		/deep/ .u-form-item {
			margin-bottom: 20rpx;
		}

		/deep/ .u-form-item__body__right {
			color: #303133;
		}

		/deep/ .u-form-item__body {
			padding: 10rpx 0;

		}

		/deep/ .u-line {
			border-color: #D9D9D999;
		}
	}
</style>